<template>
  <div class="pug-form-item-control-input">
    <div class="pug-form-item-control-input-content">
				<span class="pug-input-affix-wrapper pro-field pro-field-md">
          <input :placeholder="placeholder" :id="cref" :value="this.$props.modelValue" :disabled="disabled"  @blur="inputBlur($event)" @input="toggleValue($event)" class="pug-input w328" :type="type"
                 :maxlength="maxlen"/>
        </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "PugInput",
  // 自定义属性
  props: {
    cref:{
      type:String,
      default:""
    },
    disabled:{
      type:Boolean,
      default:false
    },
    modelValue: {
      type: String
    },
    placeholder: {
      type: String,
      default: "请输入..."
    },
    type: {
      type: String,
      default: "text"
    },
    maxlen: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {}
  },

  created() {
  },
  methods: {
    toggleValue(ev) {
      // 这个是处理 v-model数据同步
      this.$emit('update:modelValue', ev.target.value);// 把当前ev.taget.value输入值，更新到你指定v-model属性中modelValue="product.name}
      // 这个自定事件的数据同步
      this.$emit("change", ev.target.value)

    },
    inputBlur(ev){
      this.$emit("blur", ev.target.value)
    }
  }

}
</script>

<style scoped>

</style>
